<template>
  <el-button v-if="row.sourcefrom == 'cloudstorage'"
             :type="type"
             :size="size"
             :disabled="disabled"
             @click.stop="handleVideoScreenShot">
    <slot>视频截图</slot>
  </el-button>
  <component
          ref="screenShotDialogRef"
          :is="screenShotComponent"
          :dialog-visible="dialogVisible"
          :row="row"
          :key="dialogKey"
          :is-multi="isMulti"
          @handleCloseDialog="handleCloseDialog"
          @resultcallback="resultcallback"
  />
</template>

<script>
  import { ref, nextTick, defineAsyncComponent } from 'vue'
  export default {
    name: "ScreenShotButton",
    components: { 'ScreenShotDialog': defineAsyncComponent(() => import('./ScreenShotDialog')) },
    props: {
      type: {
        type: String,
        default: 'primary'
      },
      row: {
        type: Object,
        required: true
      },
      isMulti: {
        type: Boolean,
        default: true
      },
      size: {
        type: String,
        default: 'mini'
      },
      disabled: {
        type: Boolean,
        default: false
      }
    },
    emits: ['resultcallback'],
    setup(props, { emit }) {
      const screenShotDialogRef = ref(null)
      const dialogVisible = ref(false)
      const screenShotComponent = ref('ScreenShotDialog')
      const dialogKey = ref(Number)
      const handleVideoScreenShot = () => {
        dialogKey.value = new Date().getTime()
        dialogVisible.value = true
        nextTick(() => {
          screenShotDialogRef.value.init()
        })
      }


      const handleCloseDialog = () => {
        dialogVisible.value = false
      }

      const resultcallback = (data) => {
        emit('resultcallback', data, props.row)
      }

      return {
        handleVideoScreenShot,
        dialogVisible,
        screenShotDialogRef,
        handleCloseDialog,
        screenShotComponent,
        dialogKey,
        resultcallback
      }
    }
  }
</script>

<style scoped>

</style>
